<? include('includes/html/head.php'); ?>
  <title>Práctica de estilos</title>
  <link rel="stylesheet" href="pr8/general.css" type="text/css">
</head>

<body>
<? include('includes/html/atras.php'); ?>
<div id="menu">
  
    <a name=indice></a><h2><span class="tag">&lt;h2&gt;</span>Índice de esta página<span class="tag">&lt;/h2&gt;</span></h2>

   <h3>Contenidos</h3>
    <ul>
    <li><a href="#inicio">Inicio</a>
    <li><a href="#sintaxis">Sintaxis</a>
    <li><a href="#actual">Objetivos</a>
    <li><a href="#imagenes">Elementos reemplazados</a>

    </ul>
 </div>
 <div id="texto">
    <div id="inicio">
  <h1><span class="tag">&lt;h1&gt;</span>Comenzamos con un encabezado de nivel 1<span class="tag">&lt;/h1&gt;</span></h1>

    <a name=inicio></a><h2><span class="tag">&lt;h2&gt;</span>Los conceptos de <em>contenido</em> y <em>formato</em><span class="tag">&lt;/h2&gt;</span></h2>

    Nuestra intención en esta práctica es utilizar las características de estilo <em>CSS</em> para obtener efectos visuales más agradables o estéticos.
<p>Es muy importante entender que, en HTML, hay que intentar separar claramente entre el <em>contenido</em> y el <em>formato</em>.
<p>En los dos párrafos anterior tenemos tres palabras enfatizadas. Nuestro contenido exige éste énfasis por la importancia de la palabra en el contexto. Sin embargo, no es en HTML donde decimos qué tipo de enfatizado sino, sólamente, la característica de énfasis.
<p>Hay etiquetas desaprobadas en <em>HTML 4.01</em> y, hay otras, que a pesar de no estar desaprobadas, se desaconseja su uso precisamente para diferenciar entre el contenido y el formato. Algunas de estas últimas son &lt;b&gt;,&lt;i&gt;,&lt;small&gt;, ...
    <a name=sintaxis></a><h2><span class="tag">&lt;h2&gt;</span>Introducción a los estilos con <em>CSS</em><span class="tag">&lt;/h2&gt;</span></h2> 
    <p> CSS significa <em>hojas de estilo en cascada</em>, y, hasta la fecha, se has publicado dos especificaciones con una revisión a la segunda. Hablamos de <em>CSS1</em> como la primera especificación en la que había disponibles alrededor de 50 propiedades de estilo, y hablamos de <em>CSS2</em> como una segunda versión en la que se introdujeron importantes mejoras con la utilización ahora de cerca de 100 propiedades.

<p> Es el navegador de la persona que visualiza la página el que debe entender y procesar tanto el HTML como el CSS y, en consecuencia, si un navegador no soporta CSS2 o no cumple plenamente con las especificaciones CSS1 ó CSS2, nos escontraremos con que, el aspecto que pretendemos, no será apreciado por los usuarios que trabajen con él.
    <a name=actual></a><h2><span class="tag">&lt;h2&gt;</span>Objetivo de esta página<span class="tag">&lt;/h2&gt;</span></h2>
  <p>Pretendemos que esta página te sirva de base para trabajar con CSS.
  <p>Vamos a introducir los elementos fundamentales y, para ellos, como tienes e
referenciado en la práctica, utilizaremos como base 3 documentos para que te sirvan de referencia:
<ol>
  <li>Apuntes de CSS: <a href="http://www.ignside.net/man/css/index.php"><span>ignside.net</span></a>
  <li id="segundo">Especificaciones CSS1 en español: <a href="http://html.conclase.net/w3c/css1-es.html"><span>traducido de W3C</span></a> 
  <li>Especificaciones CSS2 en español: <a href="http://www.sidar.org/recur/desdi/traduc/es/css/cover.html"><span>traducido de la W3C</span></a> 

</ol>
</div>

    <a name=imagenes></a><h2><span class="tag">&lt;h2&gt;</span>Elementos <em>sustituidos</em> o <em> reemplazados</em><span class="tag">&lt;/h2&gt;</span></h2>
    <p>En la definición de CSS se habla de elemento reemplazado o sustituido
    como aquel que es sustituido por el elemento al que apunta; por ejemplo una 
    imagen. Estos elementos tienen sus propias dimensiones intrínsecas, 
    independientemente del entorno en el que los estamos introduciendo.
    <p>Vamos a introducir dos imágenes para controlar aspectos visuales. Es importante que observes la colocación de las imágenes:
    <img src=jeko1.gif alt="imagen de reptil">

    <img src="http://www.google.es/logos/julia.gif" alt="logo 1 de google">   
    <p>
    <img src="pr8/jeko1.gif" alt="imagen de reptil">
    <img src="http://www.google.es/logos/julia.gif" alt="logo 1 de google">   
    <p>Ahora algo ha cambiado:
    <p>
    <img src="http://www.google.es/logos/julia.gif" alt="logo 1 de google">
    <img class="reptil" src="pr8/jeko1.gif" alt="imagen de reptil"> 
    <p>Y que podemos decir ahora:
    <img src="http://www.google.es/logos/julia.gif" alt="logo 1 de google">
    <div id="esp">

    <img class="reptil" src="pr8/jeko1.gif" alt="imagen de reptil">
    </div>
  </div>


<? include('includes/html/validador.php'); ?>
<? include('includes/html/google-analytics.php'); ?>

</body>
</html>